<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* #box1{
            color: blue;
        }
        div#box1{
            color: yellow;
        } */
        .red{
            color: red;
        }
        .d1{
            color: blue;
        }
        
        div,p,span{
            color: black;
        }
        /* 
            样式的冲突
                -当我们通过不同选择器,选中相同的元素,并且为相同的样式设置不同的值
                 此时就发生了样式的冲突.

            发生样式冲突时,应用那个样式的权重决定

            选择器的权重    优先级
                内联样式    1,0,0,0
                id选择器    0,1,0,0
                类选择器    0,0,1,0
                元素选择器  0,0,0,1
                通配选择器  0,0,0,0
                继承的样式  没有优先级

            比较优先级,将所有的选择器进行相加,优先级高先显示(分组选择器是单独计算)
                选择器的累加不会超过其最大的数量级,类选择器在多也不会超过id选择器
                如果优先级相等,则优先使用靠下的样式


            可以在某一样式后加上 !important 优先级会最高
                注意,在开发中一定要慎重!

                
        */
    </style>
</head>
<body>
    <div id="box1" class="red d1">我是div</div>
</body>
</html>